<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangchongjie
 * @Date: 2022-06-16 10:09:20
 * @LastEditors: zhangchongjie
 * @LastEditTime: 2022-06-20 15:35:20
 * @FilePath: \workspace-y9boot-9.5-vuee:\workspace-y9boot-9.6-vue\y9vue-kernel-dcat-style\src\views\position\comps\baseInfoForm\positionForm.vue
-->
<template>
	
	<el-descriptions :column="settingStore.device === 'mobile'?1:2" border>
		<el-descriptions-item>
			<template #label>
				<span>{{ $t('岗位名称') }}</span>
				<span v-if="isEditState" class="custom-validator-symbol">*</span>
			</template>
			<el-input v-if="isEditState" ref="nameRef" v-model="positionForm.name" v-elInputCheck="{message: $t('请输入机构名称')}" />
			<span v-else>{{ currInfo.name }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('唯一标识')" v-if="!isAdd">
			<span>{{ currInfo.id }}</span>
		</el-descriptions-item>
		
		<el-descriptions-item>
			<template #label>
				<span>{{ $t('岗位容量') }}</span>
				<span v-if="isEditState" class="custom-validator-symbol">*</span>
			</template>
			<el-input 
			 v-if="isEditState"
			 type="number"
			 ref="capacityRef" 
			 :min="1"
			 v-model="positionForm.capacity" 
			 v-elInputCheck="{message: $t('请输入岗位容量'),regularType:'moreThan0',regularValue:positionForm.capacity}" />
			<span v-else>{{ currInfo.capacity }}</span>
		</el-descriptions-item>
		
		<el-descriptions-item>
			<template #label>
				<span>{{ $t('职位') }}</span>
				<span v-if="isEditState" class="custom-validator-symbol">*</span>
			</template>
			<el-select v-if="isEditState" v-model="positionForm.jobId"  filterable ref="jobIdRef"
				v-elSelectCheck="{message: $t('请选择职位')}" @change="onJobIdChange" :size="fontSizeObj.buttonSize"   >
				<el-option v-for="(item,index) in $dictionary().jobList" :key="item.originalId" :label="item.name"
				:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.originalId" />
			</el-select>
			<span v-else>{{getZhiWeiName}}</span>
		</el-descriptions-item>
		
		<el-descriptions-item :label="$t('职务类型')">
			<el-select v-if="isEditState" v-model="positionForm.dutyType" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize"   >
				<el-option v-for="(item,index) in $dictionary().dutyType" :key="index" :label="item.name"
				:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
			</el-select>
			<span v-else>{{ currInfo.dutyType }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('职务名称')">
			<el-select v-if="isEditState" v-model="positionForm.duty" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize"    >
				<el-option v-for="(item,index) in $dictionary().duty" :key="index" :label="item.name"
				:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
			</el-select>
			<span v-else>{{ currInfo.duty }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('职务级别')" span="2">
			<el-select v-if="isEditState" v-model="positionForm.dutyLevelName" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize"   >
				<el-option v-for="(item,index) in $dictionary().dutyLevel" :key="index" :label="item.name"
				:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
			</el-select>
			<span v-else>{{ currInfo.dutyLevelName }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('岗位描述')" span="2">
			<el-input v-if="isEditState" type="textarea" :rows="3" v-model="positionForm.description" />
			<span v-else>{{ currInfo.description }}</span>
		</el-descriptions-item>
	</el-descriptions>
	
	
</template>

<script lang="ts" setup>
	import { $keyNameAssign, } from '@/utils/object.ts'
	import { $dictionary,$dictionaryFunc} from '@/utils/data'
	import { listByType,getJobList } from '@/api/dictionary/index';
	import { useSettingStore } from "@/store/modules/settingStore"
	import { inject, ref, watch } from 'vue';
	const settingStore = useSettingStore()
	// 注入 字体对象
	const fontSizeObj: any = inject('sizeObjInfo');  
	const props = defineProps({
		isAdd: {//是否为添加模式，添加模式有些字段不需要显示
			type: Boolean,
			default: false,
		},
		isEditState: {//是否为编辑状态
			type: Boolean
		},
		currInfo: {//当前信息
			type: Object,
			default: () => { return {} }
		}
	})
	
	const data = reactive({
		
		positionForm: {//新增或编辑岗位表单
			id:"",
			parentId:props.currInfo.id,
			capacity:1,//岗位容量
			jobId:"",//职位名称
			name: "",//岗位名称
			dutyType: "",//职务类型 
			duty: "",//职务名称
			dutyLevelName: "",//职务级别
			description: "",//岗位描述
			tabIndex: null, //排序
		},
		nameRef:"",
		capacityRef:"",
		jobIdRef:"",
	})
	
	let {
		positionForm,
		nameRef,
		capacityRef,
		jobIdRef,
	} = toRefs(data);
	
	watch(
		() => props.isEditState,
		
		(newVal) => {
		
			if(newVal){//编辑状态给表单赋值
				$keyNameAssign(positionForm.value, props.currInfo);
			}
		}
	)
	
	onMounted(async ()=>{
		await $dictionaryFunc('dutyType',listByType,'dutyType')//请求职务类型
		await $dictionaryFunc('duty',listByType,'duty')//请求职务
		await $dictionaryFunc('dutyLevel',listByType,'dutyLevel')//请求职级
		await $dictionaryFunc('jobList',getJobList,)//获取职位列表
	});
	

	
	defineExpose({
		positionForm,
		validForm
	})
	
	const getZhiWeiName = computed(() => {
		let name = "";
		const jobList = $dictionary().jobList;
		if(jobList && jobList.length > 0){
			jobList.forEach(item => {
				if(item.originalId === props.currInfo.jobId){
					name = item.name;
				}
			})
		}
		return name
	})

	
	async function validForm() {
		if (!positionForm.value.name) {
			nameRef.value.focus();
			setTimeout(()=>{
				nameRef.value.blur()
			},0)
	
			return false;
		}else if (!positionForm.value.capacity || positionForm.value.capacity<=0) {
			capacityRef.value.focus();
			setTimeout(()=>{
				capacityRef.value.blur()
			},0)
	
			return false;
		}else if (!positionForm.value.jobId) {
			jobIdRef.value.focus();
			setTimeout(()=>{
				jobIdRef.value.blur()
			},0)
	
			return false;
		}
		
		return true;
	}
	
	
	
	const onJobIdChange = () => {//手动触发验证
		jobIdRef.value.focus()
		setTimeout(()=>{
			jobIdRef.value.blur()
		},0)
	}


</script>

<style>
</style>